<template>
	<view class="container">
		<!-- User Profile Section -->
		<view class="profile-section">
			<view class="profile-header">
				<view class="header-tabs">
					<text class="header-tab active">我</text>
					<!-- <text class="header-tab" @tap="toAddFamily">添加家属</text> -->
				</view>
			</view>
			<view class="user-profile">
				<view class="user-info">
					<view class="avatar">
						<image :src="userInfo.avatar || '/static/images/profile.png'" mode="aspectFill"></image>
					</view>
					<view class="user-details">
						<view class="name-verify">
							<text class="username" @tap="toUserInfo">{{name?name:'去登录'}}</text>
							<image class="verified-badge"
								src="https://www.ruilongan.com/profile/upload/2025/08/25/分组_1_20250825165501A006.png"
								mode="aspectFit"></image>
							<text class="verified-text" v-if="userInfo.businessName">已认证</text>
							<text class="identity-desc" v-else>未认证</text>
						</view>
						<!-- <text class="identity-desc">未认证身份</text> -->
						<text class="identity-desc" @tap="toHealthManager">健康管理师：<text
								v-if="userInfo.businessName">{{ userInfo.businessName }}</text></text>
					</view>
					<image class="right-icon"
						src="https://www.ruilongan.com/profile/upload/2025/06/27/shebei_20250627101231A050.png"
						style="width: 70rpx; height: 70rpx;" mode="aspectFit"></image>
				</view>
			</view>
			<view class="banner">
				<u-swiper :list="bannerList" keyName="picUrl" radius="12" height="150" @click="onBannerClick"></u-swiper>
			</view>

			<view class="image-scroll">
				<scroll-view class="scroll-view" scroll-x="true" show-scrollbar="false">
					<view class="scroll-item" v-for="(item, index) in jinGangList" :key="index"
						@tap="onJinGangClick(item, index)">
						<image class="scroll-image" :src="item.picUrl | avatarUrlFind('1')" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- Health Data Section -->
		<view class="health-data">
			<view class="section-header">
				<text class="section-title">健康数据</text>
				<view class="health-report-link" @click="toHealthReport">健康分析报告></view>
			</view>
			<view class="health-cards">
				<view class="health-card" v-if="healthTargetList.length>0">
					<image :src="healthTargetList[0].iconUrl | avatarUrlFind('1')" mode="aspectFit"></image>
					<view class="card-info" @tap="toBloodSugar(healthTargetList[0])">
						<view class="info-row">
							<text class="data-label">{{healthTargetList[0].targetName}}</text>
							<text class="data-value">{{healthData.bloodGlucose || '-'}} </text>
							<text class="data-unit">{{healthTargetList[0].targetUnit}}</text>

						</view>
						<text class="data-time">{{healthData.bloodGlucoseTime || '-'}}</text>
					</view>
				</view>

				<view class="health-card" v-if="healthTargetList.length>1" @tap="toWeight(healthTargetList[1])">
					<text class="data-label">{{healthTargetList[1].targetName}}</text>
					<image :src="healthTargetList[1].iconUrl | avatarUrlFind('1')" style="width: 70rpx; height: 70rpx;"
						mode="aspectFit">
					</image>
					<text class="data-value">{{healthData.weight || '-'}} {{healthTargetList[1].targetUnit}}</text>
					<text class="data-time">{{healthData.weightTime || '-'}}</text>
				</view>

				<view class="health-card" v-if="healthTargetList.length>2" @tap="tobloodPressure(healthTargetList[2])">
					<text class="data-label">{{healthTargetList[2].targetName}}</text>
					<image :src="healthTargetList[2].iconUrl | avatarUrlFind('1')" style="width: 70rpx; height: 70rpx;"
						mode="aspectFit">
					</image>
					<text class="data-value">{{healthData.bloodPressure || '-'}}{{healthTargetList[2].targetUnit}}</text>
					<text class="data-time">{{healthData.bloodPressureTime || '-'}}</text>
				</view>

				<view class="health-card" v-if="healthTargetList.length>3" @tap="toBloodFat(healthTargetList[3])">
					<text class="data-label">{{healthTargetList[3].targetName}}</text>
					<image :src="healthTargetList[3].iconUrl | avatarUrlFind('1')" style="width: 70rpx; height: 70rpx;"
						mode="aspectFit">
					</image>
					<text class="data-value">{{healthData.bloodFat || '-'}} {{healthTargetList[3].targetUnit}}</text>
					<text class="data-time">{{healthData.bloodFatTime || '-'}} </text>
				</view>

				<view class="health-card" v-if="healthTargetList.length>4" @tap="toUricAcid(healthTargetList[4])">
					<text class="data-label">{{healthTargetList[4].targetName}}</text>
					<image :src="healthTargetList[4].iconUrl | avatarUrlFind('1')" style="width: 70rpx; height: 70rpx;"
						mode="aspectFit">
					</image>
					<text class="data-value">{{healthData.uricAcid || '-'}} {{healthTargetList[4].targetUnit}}</text>
					<text class="data-time">{{healthData.uricAcidTime || '-'}} </text>
				</view>
			</view>

		</view>

		<!-- Product Recommendations -->
		<view class="recommendations">
			<view class="section-title">精选推荐</view>
			<!-- 商品列表 -->
			<scroller @init="initScroller" @down="refreshData" @up="queryGoodsList" :up="optUp" :fixed="false">
				<view class="product-grid">
					<view class="product-item" v-for="(product, index) in products" :key="index"
						@tap="goGoodDetail(product)">
						<img :src="product.image | avatarUrlFind('1')" :alt="product.drugName" />
						<view class="product-info">
							<view class="product-title">{{ product.drugName }}</view>
							<view class="product-specs">{{ product.productInfo}}</view>
							<view class="price-sales-row">
								<view class="product-price" v-if="product.goodsCategory==='P'">¥{{ product.salesPrice }}
								</view>
								<view class="product-price" v-if="product.goodsCategory==='TC'">¥{{ product.packagePrice }}
								</view>
								<view class="product-sales">已售{{ product.salesNum }}+</view>
							</view>
						</view>
					</view>
				</view>
			</scroller>
			<!-- <view class="product-grid">
				<view class="product-card">
					<image src="https://www.ruilongan.com/profile/upload/2025/06/27/路径@2x_20250627154312A060.png"
						mode="aspectFill"></image>
					<view class="product-info">
						<text class="product-title">露安适精英医用手洗洗手液700ml 限量套装</text>
						<view class="price-row">
							<text class="product-price">¥69.90</text>
							<text class="product-sales">已售2000+</text>
						</view>
					</view>
				</view>
				<view class="product-card">
					<image src="https://www.ruilongan.com/profile/upload/2025/06/27/路径@2x_20250627154312A060.png"
						mode="aspectFill"></image>
					<view class="product-info">
						<text class="product-title">露安适精英医用手洗洗手液700ml 限量套装</text>
						<view class="price-row">
							<text class="product-price">¥69.90</text>
							<text class="product-sales">已售2000+</text>
						</view>
					</view>
				</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {
		getAppIndexList,
		getTargetList,
		getHealthDataNext
	} from '@/api/index.js'
	import scroller from '@/components/scroller/scroller.vue';
	import {
		queryGoodsList
	} from '@/api/shop.js'
	import {
		getInfo
	} from '@/api/vipUser.js'
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'

	export default {
		computed: mapGetters(['name', 'userId']),
		data() {
			return {
				bannerList: [],
				jinGangList: [],
				healthTargetList: [],
				currentCategory: 0,
				scroller: {},
				targetId: '',
				optUp: {
					onScroll: true, //监听滚动事件
					page: {
						size: 5
					} //下拉加载15条
				},
				queryParams: {},
				products: [],
				userInfo: {},
				healthData: {
					bloodGlucose: '-',
					weight: '-',
					bloodFat: '-',
					uricAcid: '-',
					bloodPressure: '-',
					bloodGlucoseTime: '-',
					weightTime: '-',
					bloodFatTime: '-',
					uricAcidTime: '-',
					bloodPressureTime: '-'
				}
			}
		},
		created() {
			this.getAppIndexList()
			this.getTargetList()
			this.getHealthDataNext()
		},
		onShow() {
			// TODO 后边放缓存，所有用户头像名称等（改之后更新，随后直接取）
			this.getInfo()
		},
		methods: {
			/*初始化滚动*/
			initScroller(scroller) {
				this.scroller = scroller;
			},
			/*刷新数据*/
			refreshData() {
				this.loadData()
			},
			/*加载数据*/
			loadData() {
				this.products = [];
				this.scroller.resetUpScroll();
			},

			toUserInfo() {
				uni.navigateTo({
					url: '/subPackage_1/pages/mine/userInfo?userId=' + this.userId
				})
			},
			toHealthManager() {
				uni.navigateTo({
					url: '/subPackage_1/pages/index/health-manager'
				})
			},
			toAddFamily() {
				uni.navigateTo({
					url: '/subPackage_1/pages/index/add-family'
				})
			},
			toBloodSugar(item) {
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/blood-sugar?targetId=' + item.id
				})
			},
			toWeight(item) {
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/weight?targetId=' + item.id
				})
			},
			tobloodPressure(item) {
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/blood-pressure?targetId=' + item.id
				})
			},
			toBloodFat(item) {
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/blood-lipid?targetId=' + item.id
				})
			},
			toUricAcid(item) {
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/uric-acid?targetId=' + item.id
				})
			},
			toHealthReport() {
				console.log('toHealthReport 方法被调用了');
				uni.showToast({
					title: '正在跳转...',
					icon: 'loading',
					duration: 1000
				});
				
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/health-report',
					success: function(res) {
						console.log('跳转成功', res);
					},
					fail: function(err) {
						console.log('跳转失败', err);
						uni.showToast({
							title: '跳转失败: ' + JSON.stringify(err),
							icon: 'none',
							duration: 3000
						});
					}
				});
			},

			getAppIndexList() {
				getAppIndexList().then(res => {
					this.bannerList = res.data.bannerList
					this.bannerList.forEach(item => {
						item.picUrl = config.remotePicUrlPd + item.picUrl
					})

					this.jinGangList = res.data.jinGangList

				})
			},

			getTargetList() {
				// if (this.userId) {
				getTargetList({
					userId: this.userId,
					isStopUse: '0'
				}).then(res => {
					// console.log(res)
					this.healthTargetList = res.rows
				})
				// }

			},

			getHealthDataNext() {
				if (getToken()) {
					getHealthDataNext().then(res => {
						console.log(res)
						this.healthData = res.data
					})
				}
			},

			async queryGoodsList() {
				this.queryParams.pageNum = this.scroller.num
				this.queryParams.pageSize = this.scroller.size
				this.queryParams.isShow = '1'
				this.queryParams.isRecommend = '1'
				this.queryParams.shopFlag = 'normal'
				const {
					rows,
					total
				} = await queryGoodsList(this.queryParams)

				this.products = this.products.concat(rows);
				this.$forceUpdate();
				this.scroller.endBySize(rows.length, total);
				uni.stopPullDownRefresh();
				uni.hideLoading();
			},

			goGoodDetail(product) {
				uni.navigateTo({
					url: '/subPackage_1/pages/goods/good-detail?id=' + product.id
				});
			},

			onBannerClick(index) {
				const banner = this.bannerList[index];
				if (banner && banner.jumpUrl) {
					// 如果有链接地址，进行跳转
					if (banner.jumpUrl.startsWith('http')) {
						// 外部链接，使用webview打开
						uni.navigateTo({
							url: '/pages/common/webview/index?url=' + encodeURIComponent(banner.jumpUrl)
						});
					} else {
						// 内部页面跳转
						uni.navigateTo({
							url: banner.jumpUrl
						});
					}
				}
			},

			onJinGangClick(item, index) {
				if (item && item.jumpUrl) {
					// 如果有链接地址，进行跳转
					if (item.jumpUrl.startsWith('http')) {
						// 外部链接，使用webview打开
						// uni.navigateTo({
						// 	url: '/pages/common/webview/index?url=' + encodeURIComponent(item.jumpUrl)
						// });
						wx.navigateToMiniProgram({
							appId: 'wxa6db3581a6da049d',
							path: 'pages/index/index',
							extraData: {
								key: 'value'
							},
							success(res) {
								console.log('跳转成功')
							},
							fail(err) {
								console.error('跳转失败', err)
							}
						});
					} else {
						// 内部页面跳转
						uni.navigateTo({
							url: item.jumpUrl
						});
					}
				}
			},
			getInfo() {
				if (getToken()) {
					getInfo(this.userId).then(res => {
						this.userInfo = res.data
					})
				}
			}

		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		/* padding-bottom: 100rpx; */
	}

	.profile-section {
		background: linear-gradient(227deg, #6AF0DB 0%, #ffffff 80%);
		padding: 20rpx;
	}

	.profile-header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
	}

	.header-tabs {
		display: flex;
		align-items: center;
		margin-top: 40px;
	}

	.header-tab {
		font-size: 30rpx;
		color: #666666;
		margin-right: 24rpx;
		position: relative;
	}

	.header-tab.active {
		font-size: 40rpx;
		color: #000000;
		font-weight: 500;
	}

	.header-tab.active::after {
		content: '';
		position: absolute;
		bottom: -6rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 48rpx;
		height: 8rpx;
		background: #FFEB3B;
		border-radius: 8rpx;
		clip-path: path('M0,2 Q24,8 48,2');
	}

	.add-family {
		font-size: 28rpx;
		color: #666;
	}

	.user-profile {
		padding: 20rpx 30rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 16rpx;
	}

	.avatar image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.user-details {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.name-verify {
		display: flex;
		align-items: center;
	}

	.username {
		font-size: 36rpx;
		color: #000000;
		margin-right: 12rpx;
	}

	.verified-badge {
		width: 32rpx;
		height: 32rpx;
		margin-right: 6rpx;
	}

	.verified-text {
		font-size: 24rpx;
		background: linear-gradient(90deg, #F4B75B 0%, #FF301A 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.verify-status {
		font-size: 24rpx;
		color: #000;
		background: #f4f5e3;
		padding: 4rpx 16rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 30rpx;
		border-bottom-left-radius: 18rpx;
		border-bottom-right-radius: 30rpx;
	}

	.identity-desc {
		font-size: 28rpx;
		color: #969696;
		margin-top: 14rpx;
	}

	.right-icon {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 0;
	}

	.banner {
		margin-top: 20rpx;
		width: 100%;
		height: 150px;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.health-data {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		background: #fff;
		margin-top: 20rpx;
		position: relative;
		overflow: hidden;
		padding-left: 16rpx;
		padding-right: 6rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.health-report-link {
		font-size: 24rpx;
		color: #4CD080;
		text-decoration: none;
		margin-right: 18rpx;
		padding: 10rpx;
		cursor: pointer;
		display: inline-block;
		/* background-color: rgba(76, 208, 128, 0.1); */
		/* border: 1rpx solid #4CD080; */
		border-radius: 8rpx;
		position: relative;
		z-index: 999;
	}

	.health-data::after {
		content: '';
		position: absolute;
		top: 26rpx;
		left: 10rpx;
		width: 100%;
		height: 60rpx;
		background-image: url('https://www.ruilongan.com/profile/upload/2025/06/27/路径@2x_20250627113158A059.png');
		background-repeat: no-repeat;
		background-position: left top;
		background-size: contain;
		z-index: 1;
	}

	.section-title {
		font-size: 34rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 0;
		position: relative;
		z-index: 20;
	}

	.health-cards {
		position: relative;
		z-index: 2;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		padding-top: 20px;
		margin-top: 0;
	}

	.health-card {
		background: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow:
			2rpx -4rpx 8rpx rgba(0, 0, 0, 0.02),
			8rpx 2rpx 12rpx rgba(0, 0, 0, 0.08),
			0 12rpx 16rpx rgba(0, 0, 0, 0.12),
			-2rpx 2rpx 8rpx rgba(0, 0, 0, 0.04);
		transition: all 0.3s ease;
	}

	.health-card:hover {
		box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);
		transform: translateY(-2rpx);
	}

	/* 血糖卡片样式 */
	.health-card:first-child {
		width: calc(66% - 10rpx);
		height: 248rpx;
		display: flex;
		align-items: center;
		padding-top: 33px;
		padding-bottom: 33px;
		padding-left: 10px;
		padding-right: 11px;
	}

	.health-card:first-child image {
		width: 80rpx;
		height: 80rpx;
		margin-right: 40rpx;
	}

	.health-card:first-child .card-info {
		flex: 1;
	}

	.health-card:first-child .info-row {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.health-card:first-child .data-label {
		font-size: 38rpx;
		color: #000000;
		width: 100rpx;
		margin-right: 16rpx;
	}

	.health-card:first-child .data-value {
		font-size: 38rpx;
		/* font-weight: 600; */
		color: #000000;
	}

	.health-card:first-child .data-unit {
		font-size: 32rpx;
		/* font-weight: 600; */
		color: #000000;
	}

	.health-card:first-child .data-time {
		font-size: 24rpx;
		color: #999;
		margin: 0;
		padding: 0;
		padding-top: 30rpx;
	}

	/* 其他健康卡片样式 */
	.health-card:not(:first-child) {
		width: calc(33% - 15rpx);
		height: 248rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding-top: 12px;
		padding-bottom: 7px;
		padding-left: 2px;
		padding-right: 2px;

	}

	.health-card:not(:first-child) .data-label {
		font-size: 32rpx;
		color: #000;
		margin-bottom: 10rpx;
	}

	.health-card:not(:first-child) image {
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 12rpx;
	}

	.health-card:not(:first-child) .data-value {
		font-size: 30rpx;
		font-weight: 500;
		color: #000;
		margin-bottom: 8rpx;
	}

	.health-card:not(:first-child) .data-time {
		font-size: 16rpx;
		color: #999;
		margin-top: 6px;
	}

	.recommendations {
		padding: 30rpx;
		background: #fff;
		margin-top: 20rpx;
	}

	.recommendations .section-title {
		position: relative;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.recommendations .section-title::before,
	.recommendations .section-title::after {
		content: '';
		width: 100rpx;
		/* 50px = 100rpx */
		height: 2rpx;
		background: #E0E0E0;
		margin: 0 20rpx;
	}

	.product-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.product-card {
		width: calc(50% - 10rpx);
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.product-card image {
		width: 100%;
		height: 320rpx;
		object-fit: cover;
	}

	.product-info {
		padding: 16rpx;
	}

	.product-title {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		margin-bottom: 8rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.price-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.product-price {
		font-size: 32rpx;
		color: #FF4B4B;
		font-weight: 600;
	}

	.product-sales {
		font-size: 24rpx;
		color: #999;
		margin-left: auto;
	}

	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		background: #fff;
		padding: 20rpx 0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-item image {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 8rpx;
	}

	.nav-item text {
		font-size: 24rpx;
		color: #666;
	}

	.image-scroll {
		margin-top: 30rpx;
		width: 100vw;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	.scroll-view {
		white-space: nowrap;
		width: 100vw;
	}

	.scroll-item {
		display: inline-block;
		margin-right: 24rpx;
	}

	.scroll-item:first-child {
		margin-left: 30rpx;
	}

	.scroll-item:last-child {
		margin-right: 30rpx;
	}

	.scroll-image {
		width: 280rpx;
		height: 280rpx;
		border-radius: 40rpx;
	}

	.product-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.product-item {
		background: #fff;
		border-radius: 4px;
		overflow: hidden;
	}

	.product-item img {
		width: 100%;
		/* height: 200px; */
		object-fit: cover;
	}

	.product-info {
		padding: 10px;
	}

	.product-title {
		font-size: 14px;
		margin-bottom: 5px;
		color: #333;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-specs {
		font-size: 12px;
		color: #999;
		margin: 4px 0 8px 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.price-sales-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.product-price {
		color: #ff4d4f;
		font-size: 16px;
		font-weight: bold;
	}

	.product-sales {
		font-size: 12px;
		color: #999;
	}
</style>